<template>
  <!-- 骰子动画组件 - 使用CSS 3D变换实现 -->
  <view class="wrap">
    <view class="stage">
      <!-- 骰子容器 - 实现3D旋转效果 -->
      <view class="dice-container" :style="diceStyle">
        <!-- 骰子的6个面 - 使用红点替代数字 -->
        <view class="dice-face front">
          <view class="dice-pips one">
            <div class="pip"></div>
          </view>
        </view>
        <view class="dice-face back">
          <view class="dice-pips six">
            <div class="pip"></div>
            <div class="pip"></div>
            <div class="pip"></div>
            <div class="pip"></div>
            <div class="pip"></div>
            <div class="pip"></div>
          </view>
        </view>
        <view class="dice-face left">
          <view class="dice-pips four">
            <div class="pip"></div>
            <div class="pip"></div>
            <div class="pip"></div>
            <div class="pip"></div>
          </view>
        </view>
        <view class="dice-face right">
          <view class="dice-pips three">
            <div class="pip"></div>
            <div class="pip"></div>
            <div class="pip"></div>
          </view>
        </view>
        <view class="dice-face top">
          <view class="dice-pips five">
            <div class="pip"></div>
            <div class="pip"></div>
            <div class="pip"></div>
            <div class="pip"></div>
            <div class="pip"></div>
          </view>
        </view>
        <view class="dice-face bottom">
          <view class="dice-pips two">
            <div class="pip"></div>
            <div class="pip"></div>
          </view>
        </view>
      </view>
      <view class="result" v-if="resultFace">
        <view :class="['result-pips', 'result-' + resultFace]">
          <div class="pip" v-for="n in resultFace" :key="n"></div>
        </view>
      </view>
    </view>
    <view class="row">
      <button class="btn primary" @tap="roll" @click="roll" :disabled="isRolling">摇一摇(3D)</button>
      <button class="btn" @tap="reset" @click="reset" :disabled="isRolling">重置</button>
    </view>
    <text class="hint">3D骰子，支持随机结果和动画效果</text>
  </view>
</template>

<script>
export default {
  name: 'DiceRoller3D',
  data() {
    return {
      resultFace: 0,  // 当前朝上的面
      isRolling: false,  // 是否正在滚动
      rotationX: 0,  // X轴旋转角度
      rotationY: 0,  // Y轴旋转角度
      rollTimeout: null  // 滚动动画的定时器
    }
  },
  computed: {
    // 计算骰子的3D变换样式
    diceStyle() {
      return {
        transform: `rotateX(${this.rotationX}deg) rotateY(${this.rotationY}deg)`,
        transition: this.isRolling ? 'transform 1.2s ease-out' : 'transform 0s' // 增加动画长度
      }
    }
  },
  methods: {
    // 摇骰子方法
    roll() {
      if (this.isRolling) return
      
      try {
        this.isRolling = true
        this.resultFace = 0
        
        // 清除之前的定时器
        if (this.rollTimeout) {
          clearTimeout(this.rollTimeout)
        }
        
        // 随机生成骰子结果（1-6）
        const result = Math.floor(Math.random() * 6) + 1
        
        // 先设置一个随机的旋转动画效果
        const randomStartX = 360 * Math.floor(Math.random() * 5)
        const randomStartY = 360 * Math.floor(Math.random() * 5)
        this.rotationX = randomStartX
        this.rotationY = randomStartY
        
        // 强制重新渲染UI
        this.$nextTick(() => {
          // 添加一些随机旋转圈数来增加动画效果
          const randomFullRotations = 360 * Math.floor(Math.random() * 3)
          this.rotationX += randomFullRotations
          this.rotationY += randomFullRotations
        })
        
        // 动画结束后，精确设置角度确保正确的面朝用户
        this.rollTimeout = setTimeout(() => {
          // 关键点：根据CSS 3D旋转方向修正角度映射
          let finalRotationX = 0
          let finalRotationY = 0
          
          // 根据用户反馈和CSS 3D旋转原理，调整旋转角度使正面显示与结果一致
          switch(result) {
            case 1: // 1点 - front面朝向用户
              finalRotationX = 0
              finalRotationY = 0
              break
            case 6: // 6点 - back面朝向用户
              finalRotationX = 0
              finalRotationY = 180
              break
            case 3: // 3点 - 需要使用270度旋转（逆时针90度）
              finalRotationX = 0
              finalRotationY = 270
              break
            case 4: // 4点 - 需要使用90度旋转（顺时针90度）
              finalRotationX = 0
              finalRotationY = 90
              break
            case 5: // 5点 - 需要使用270度旋转（逆时针90度）
              finalRotationX = 270
              finalRotationY = 0
              break
            case 2: // 2点 - 需要使用90度旋转（顺时针90度）
              finalRotationX = 90
              finalRotationY = 0
              break
          }
          
          // 先设置旋转角度
          this.rotationX = finalRotationX
          this.rotationY = finalRotationY
          
          // 等待DOM更新后设置结果值，确保显示正确的点数
          this.$nextTick(() => {
            this.resultFace = result
            this.isRolling = false
            
            console.log('Dice3D: 最终设置 - 角度(X,Y):', this.rotationX, this.rotationY, '结果:', this.resultFace)
          })
          
        }, 1300)
        
      } catch (e) {
        console.error('Dice roll error:', e)
        this.isRolling = false
      }
    },
    
    // 重置骰子
    reset() {
      if (this.isRolling) return
      
      try {
        this.resultFace = 0
        this.rotationX = 0
        this.rotationY = 0
        
        if (this.rollTimeout) {
          clearTimeout(this.rollTimeout)
        }
        
        console.log('Dice3D: 重置成功')
      } catch (e) {
        console.error('Dice reset error:', e)
      }
    }
  },
  beforeDestroy() {
    // 清除定时器
    if (this.rollTimeout) {
      clearTimeout(this.rollTimeout)
    }
  }
}
</script>

<style scoped>
/* 容器样式 */
.wrap {
  display: grid;
  gap: 12rpx;
  justify-items: center;
  position: relative;
}

/* 骰子舞台 */
.stage {
  width: 100%;
  height: 220px;
  border-radius: 16rpx;
  overflow: hidden;
  background: radial-gradient(600rpx 260rpx at 50% 100%, #0b1029 0%, #0f1226 45%, #0f1226 100%);
  border: 2rpx solid rgba(255,255,255,.08);
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  perspective: 1000px;  /* 设置3D透视 */
}

/* 骰子结果显示 */
.result {
  position: absolute;
  top: 8rpx;
  right: 12rpx;
  padding: 6rpx 14rpx;
  background: rgba(255,255,255,.95);
  border-radius: 16rpx;
  border: 2rpx solid rgba(0,0,0,.12);
  box-shadow: 0 6rpx 16rpx rgba(0,0,0,.25);
}

/* 按钮行 */
.row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12rpx;
  width: 100%;
}

/* 按钮样式 */
.btn {
  height: 60rpx;
  border-radius: 20rpx;
  border: 2rpx solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  color: #e9ecff;
  font-size: 24rpx;
}

.btn.primary {
  background: linear-gradient(135deg, #6c8cff, #5a6dff);
  border-color: rgba(0,0,0,.2);
}

/* 禁用状态 */
.btn[disabled] {
  opacity: 0.6;
  pointer-events: none;
}

/* 提示文本 */
.hint {
  color: #a7b0d9;
  font-size: 22rpx;
}

/* 骰子容器 - 实现3D变换 */
.dice-container {
  position: relative;
  width: 120px;
  height: 120px;
  transform-style: preserve-3d;
  transition: transform 1.2s ease-out;
}

/* 骰子面的通用样式 */
.dice-face {
  position: absolute;
  width: 120px;
  height: 120px;
  background: #ffffff;
  border-radius: 8px;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 2px solid #e0e0e0;
  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.1);
}

/* 各个面的位置 */
.dice-face.front {
  transform: translateZ(60px);
}

.dice-face.back {
  transform: rotateY(180deg) translateZ(60px);
}

.dice-face.left {
  transform: rotateY(-90deg) translateZ(60px);
}

.dice-face.right {
  transform: rotateY(90deg) translateZ(60px);
}

.dice-face.top {
  transform: rotateX(90deg) translateZ(60px);
}

.dice-face.bottom {
  transform: rotateX(-90deg) translateZ(60px);
}

/* 骰子点数 - 红点样式 */
.dice-pips {
  position: relative;
  width: 80px;
  height: 80px;
}

/* 一点 */
.dice-pips.one::before {
  content: '';
  position: absolute;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background-color: #e53935;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* 两点 */
.dice-pips.two::before {
  content: '';
  position: absolute;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background-color: #e53935;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  top: 20%;
  left: 20%;
}

.dice-pips.two::after {
  content: '';
  position: absolute;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background-color: #e53935;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  bottom: 20%;
  right: 20%;
}

/* 三点 */
.dice-pips.three::before {
  content: '';
  position: absolute;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background-color: #e53935;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  top: 20%;
  left: 20%;
}

.dice-pips.three::after {
  content: '';
  position: absolute;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background-color: #e53935;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  bottom: 20%;
  right: 20%;
}

.dice-pips.three .pip {
  content: '';
  position: absolute;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background-color: #e53935;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* 四点 */
.dice-pips.four::before {
  content: '';
  position: absolute;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background-color: #e53935;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  top: 20%;
  left: 20%;
}

.dice-pips.four::after {
  content: '';
  position: absolute;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background-color: #e53935;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  top: 20%;
  right: 20%;
}

.dice-pips.four .pip:nth-child(1) {
  content: '';
  position: absolute;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background-color: #e53935;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  bottom: 20%;
  left: 20%;
}

.dice-pips.four .pip:nth-child(2) {
  content: '';
  position: absolute;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background-color: #e53935;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  bottom: 20%;
  right: 20%;
}

/* 五点 */
.dice-pips.five::before {
  content: '';
  position: absolute;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background-color: #e53935;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  top: 20%;
  left: 20%;
}

.dice-pips.five::after {
  content: '';
  position: absolute;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background-color: #e53935;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  top: 20%;
  right: 20%;
}

.dice-pips.five .pip:nth-child(1) {
  content: '';
  position: absolute;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background-color: #e53935;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.dice-pips.five .pip:nth-child(2) {
  content: '';
  position: absolute;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background-color: #e53935;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  bottom: 20%;
  left: 20%;
}

.dice-pips.five .pip:nth-child(3) {
  content: '';
  position: absolute;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background-color: #e53935;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  bottom: 20%;
  right: 20%;
}

/* 六点 */
.dice-pips.six::before {
  content: '';
  position: absolute;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background-color: #e53935;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  top: 18%;
  left: 20%;
}

.dice-pips.six::after {
  content: '';
  position: absolute;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background-color: #e53935;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  top: 18%;
  right: 20%;
}

.dice-pips.six .pip:nth-child(1) {
  content: '';
  position: absolute;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background-color: #e53935;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  top: 50%;
  left: 20%;
  transform: translateY(-50%);
}

.dice-pips.six .pip:nth-child(2) {
  content: '';
  position: absolute;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background-color: #e53935;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  top: 50%;
  right: 20%;
  transform: translateY(-50%);
}

.dice-pips.six .pip:nth-child(3) {
  content: '';
  position: absolute;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background-color: #e53935;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  bottom: 18%;
  left: 20%;
}

.dice-pips.six .pip:nth-child(4) {
  content: '';
  position: absolute;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background-color: #e53935;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  bottom: 18%;
  right: 20%;
}

/* 结果显示区域的点数样式 */
.result-pips {
  width: 40px;
  height: 40px;
  position: relative;
}

.result-pips .pip {
  content: '';
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #e53935;
}

/* 结果显示 - 一点 */
.result-pips.result-1 .pip:nth-child(1) {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* 结果显示 - 两点 */
.result-pips.result-2 .pip:nth-child(1) {
  top: 25%;
  left: 25%;
}

.result-pips.result-2 .pip:nth-child(2) {
  bottom: 25%;
  right: 25%;
}

/* 结果显示 - 三点 */
.result-pips.result-3 .pip:nth-child(1) {
  top: 25%;
  left: 25%;
}

.result-pips.result-3 .pip:nth-child(2) {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.result-pips.result-3 .pip:nth-child(3) {
  bottom: 25%;
  right: 25%;
}

/* 结果显示 - 四点 */
.result-pips.result-4 .pip:nth-child(1) {
  top: 25%;
  left: 25%;
}

.result-pips.result-4 .pip:nth-child(2) {
  top: 25%;
  right: 25%;
}

.result-pips.result-4 .pip:nth-child(3) {
  bottom: 25%;
  left: 25%;
}

.result-pips.result-4 .pip:nth-child(4) {
  bottom: 25%;
  right: 25%;
}

/* 结果显示 - 五点 */
.result-pips.result-5 .pip:nth-child(1) {
  top: 25%;
  left: 25%;
}

.result-pips.result-5 .pip:nth-child(2) {
  top: 25%;
  right: 25%;
}

.result-pips.result-5 .pip:nth-child(3) {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.result-pips.result-5 .pip:nth-child(4) {
  bottom: 25%;
  left: 25%;
}

.result-pips.result-5 .pip:nth-child(5) {
  bottom: 25%;
  right: 25%;
}

/* 结果显示 - 六点 */
.result-pips.result-6 .pip:nth-child(1) {
  top: 20%;
  left: 25%;
}

.result-pips.result-6 .pip:nth-child(2) {
  top: 20%;
  right: 25%;
}

.result-pips.result-6 .pip:nth-child(3) {
  top: 50%;
  left: 25%;
  transform: translateY(-50%);
}

.result-pips.result-6 .pip:nth-child(4) {
  top: 50%;
  right: 25%;
  transform: translateY(-50%);
}

.result-pips.result-6 .pip:nth-child(5) {
  bottom: 20%;
  left: 25%;
}

.result-pips.result-6 .pip:nth-child(6) {
  bottom: 20%;
  right: 25%;
}


</style>


